import {
  FixedLayoutEditorProvider,
  EditorRenderer,
  FixedLayoutPluginContext,
} from "@flowgram.ai/fixed-layout-editor";

import "@flowgram.ai/fixed-layout-editor/index.css";
import "./index.css";

import { nodeRegistries } from "./node-registries";
import { initialData } from "./initial-data";
import { useEditorProps } from "./hooks/use-editor-props";
import { Tools } from "./components/tools";
import { Minimap } from "./components/minimap";
import { FlowSelect } from "./components/flow-select";
import { useRef } from "react";

export const Editor = () => {
  const editorProps = useEditorProps(initialData, nodeRegistries);
  console.log("==> editorProps", editorProps);
  const flowGramInstance = useRef<FixedLayoutPluginContext>();
  const outputMsg = () => {
    const data = flowGramInstance.current?.document.toJSON()

    console.log("==> outputMsg", JSON.parse(JSON.stringify(data, null, 2)));
  };
  return (
    <FixedLayoutEditorProvider ref={flowGramInstance as any} {...editorProps}>
      <div className="demo-fixed-container">
        <EditorRenderer>
          {/* add child panel here */}
        </EditorRenderer>
        <Tools />
        <FlowSelect />
        <Minimap />
      </div>
      <button onClick={outputMsg}>test</button>
    </FixedLayoutEditorProvider>
  );
};
